<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/main.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content{
				background-image: linear-gradient(to bottom,#000,#000,#545454);
				height: 100vh;
			}
			.container{
				background-color: transparent;
				padding: 30px 10px;
				
			}
			.userinfo-box{
				width: 100%;
				height: 180px;
				/* background-color: #fff; */
				background-image: url(../img/bg_black1.jpg);
				background-size: 100% auto;
				background-repeat: no-repeat;
				padding:35px;
				border-radius: 12px;
				left: 50%;
				display: flex;
				flex-direction: row;
				box-sizing: border-box;
				box-shadow: 0 0 12px rgba(255,255,255,.5);
				color:#fff
				
			}
			.btn-group{
				width: 100%;
				height: 60px;
				margin-top: 15px;
				background-image: linear-gradient(to bottom,#474747,#000);
				background-repeat: no-repeat;
				border-radius: 50px;
				box-sizing: border-box;
				box-shadow: 0 0 8px rgba(255,255,255,.35);
				color: #989898;
				text-align: center;
				line-height: 60px;
				font-size: 20px;
				font-weight: bold;
				position: relative;
			}
			
			.btn-group::before{
				content: "";
				width: 100%;
				height:100%;
				border-radius: 50px;
				background-color:transparent;
				position: absolute;
				z-index: 999;
				left: 0;
				
			}
			
			.btn-group:active::before{
				background-color:rgba(255,255,255,.04)
			}
			.userinfo-box img{
				width: 100px;
				height: 100px;
				border-radius: 8px;
				
			}
			.userinfo-box .info{
				height: 155px;
				width: 100%;
			}
			.userinfo-box .info ul{
				list-style-type: none;
				padding: 0;
				margin-top: 0;
			}
			.userinfo-box .info ul li:nth-child(1){
				font-size: 20px;
				font-weight: bold;
			}
			.userinfo-box .info ul li{
				margin-top: 10px;
				margin-bottom: 10px;
				font-size: 16px;
			}
			.userinfo-box .info ul li+li label{
				margin-right: 15px;
			}
			.mui-bar-nav{
				box-shadow: none;
			}
			
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav ">
			<div class="mui-margin-25"></div>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">用户详情</h1>
		</header>
		<div class="mui-content">
			<div class="container">
				
				<div class="btn-group" id="add-friend">
					添加好友
				</div>
			</div>
			
			
		</div>
		
		<script src="../js/mui.js"></script>
		<script src="../js/main.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.init()
			var _USER_ID = null;
			mui.plusReady(function () {
				const indexWebview = plus.webview.currentWebview();
				indexWebview.addEventListener("show",function(){
					if(indexWebview._waitCloseWebview){
						const _preWebview = plus.webview.getWebviewById(indexWebview._waitCloseWebview);
						if(_preWebview){
							_preWebview.close();
						}
					}
				})
				const _targetUserId = indexWebview._ext_user_id;
				const _bindType = indexWebview.bindType;
				_USER_ID = _targetUserId;
				// 获取用户信息并渲染
				getAndResolverUserInfo(_targetUserId,function(){
					plus.nativeUI.closeWaiting();
					indexWebview.show('slide-in-right', 300);
					
					
					mui("#add-friend")[0].addEventListener("tap",function(){
						plus.device.vibrate(10);
						plus.nativeUI.showWaiting("正在发送请求...");
						var entity = JSON.parse(plus.storage.getItem("userInfo"));
						 _SERVER.user.addFriendsRequest(_USER_ID,_bindType,entity.token).then(res=>{
							 plus.nativeUI.closeWaiting();
							 if(res.code === "200"){
								 mui.toast("添加请求已发送,待对方确认")
							 }else{
								 mui.alert(res.msg,"提示","OK",function(){},"div")
							 }
						 })
					})
				});
			})
			
			function getAndResolverUserInfo(userId,fn){
				_SERVER.user.findUser(userId).then(res=>{
					if(res.code === "200"){
						const html = getHtml(res.data);
						$(".container").prepend(html);
						fn();
					}else{
						mui.toast(res.msg);
						plus.webview.currentWebview().close();
					}
				})
			}
			
			function getHtml(obj){
				var html="";
				html+='<div class="userinfo-box">';
					html+='<div style="width: 220px;">';
						html+='<img class="preview-img-tap" src="'+(obj.photoDefault?obj.photoDefault:"../img/def_photo.jpg")+'" id="user-photo">';
					html+='</div>';
					html+='<div class="info">';
						html+='<ul>';
						html+=' <li>'+obj.name+'<i class="mui-icon mui-icon-contact" style="color: #ff8902;position: relative;top:-1px"></i></li>';
							html+='<li><label>昵称:</label>'+obj.name+'</li>';
							html+='<li><label>易信号:</label>'+obj.username+'</li>';
						html+='</ul>';
					html+='</div>';
				html+='</div>';
				return html;
			}
		</script>
		
	</body>

</html>
